<template>
    <div class="container">
        <nav class="Top">5173登录</nav>
        <div class="Top-tabs">
            <div :class="['left', tabNum == 0 ? 'con' : '']" @click="tabNum = 0">用户名登录</div>
            <div :class="['left', tabNum == 1 ? 'con' : '']" @click="tabNum = 1">手机快捷登录</div>
        </div>

        <div class="inputs" v-if="tabNum == 0">
            <div class="user"><span>用户名</span><input type="text" placeholder="绑定手机/用户名" v-model="userName"></div>
            <div class="user"><span>密码</span><input type="password" placeholder="请输入密码" v-model="password"></div>
            <div class="btn" @click="userSign">登录</div>
            <p><a href="#">找回密码</a></p>
        </div>

        <div class="inputs" v-if="tabNum == 1">
            <div class="user"><span>手机号</span><input type="text" placeholder="绑定手机" v-model="phoneNum"></div>
            <p class="form-group" style="display: block;">未注册的手机号验证后自动创建5173帐户</p>
            <div class="user"><span>验证码</span><input type="text" style="width:155px;" placeholder="请输入短信动态验证码"
                    v-model="cookieNum">
                <button class="getnum" @click="getcode" :disabled="nodian">获取验证码<div class="time" :style="times">{{
                        count
                }}</div></button>
            </div>
            <div class="btn" @click="phoneSign">登录</div>
            <p><a href="#">找回密码</a></p>
        </div>
        <div class="box">
            <input type="checkbox" v-model="box"><span>勾选即代表您已同意以下协议</span><a
                href="http://images001.5173cdn.com/html/my5173/v4/yhxy.html" style="color:#259df0">5173用户服务协议</a>、
            <a href="http://html.5173.com/5173/private/private_policy01.html" style="color:#259df0">隐私权政策</a>
        </div>

        <van-divider>其他方式登录</van-divider>

        <div class="dd">
            <a
                href="https://graph.qq.com/oauth2.0/authorize?display=mobile&response_type=code&client_id=213333&redirect_uri=https%3A%2F%2Fpassport.5173.com%2FM%2FSignIn%3FappNo%3Dqq%26returnUrl%3Dhttps%3A%2F%2Fpassport.5173.com%2FM%2FRegister%2FM%26returnUrlKey%3d%26undecode%3d0&state=4953">
                <img src="../assets/img/qq.png" alt="">
                <span>QQ号登录</span>
            </a>
            <a
                href="https://mapi.alipay.com/gateway.do?service=alipay.auth.authorize&partner=2088201416532341&sign_type=MD5&return_url=https%3A%2F%2Fpassport.5173.com%2FM%2FSignIn%3FappNo%3Dalipay%26returnUrl%3Dhttps%3A%2F%2Fpassport.5173.com%2FM%2FRegister%2FM%26returnUrlKey%3Drukalipay17515324201&target_service=user.auth.quick.login&sign=285bca0d5ef5a0de3b041dd5df245d79&_input_charset=utf-8">
                <img src="../assets/img/zfb.png" alt="">
                <span>支付宝登录</span>
            </a>
        </div>

    </div>
</template>

<script>
export default {
    data() {
        return {
            tabNum: 0,
            userName: "", //用户名
            password: "",    //密码
            phoneNum: "",    //手机号码
            cookieNum: "",   //验证码
            box: false,      //用户名页面多选框

            count: 0,
            nodian: false,
            times: "display:none",
        };
    },
    methods: {
        userSign() {
            console.log(this.box);
            let reg = /^[A-Za-z0-9]{6,11}$/;
            let psw = /^[a-zA-Z0-9]\w{5,17}$/;

            if (!reg.test(this.userName) || !psw.test(this.password)) {
                this.$toast("用户名或密码有误!")
                return;
            } else {
                if (!this.box) {
                    this.$toast("请先阅读并同意相关协议!")
                } else {
                    this.$toast("登陆成功");
                    this.$router.push("/home");
                    window.localStorage.setItem("token", "14777780746")
                }


            }

        },
        phoneSign() {
            console.log(this.box);
            let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
            let psw = /^\d{4,4}$/;

            if (!reg.test(this.phoneNum) || !psw.test(this.cookieNum)) {
                this.$toast("验证码错误!")
                return;
            } else {
                if (!this.box) {
                    this.$toast("请先阅读并同意相关协议!")
                } else {
                    this.$toast("登陆成功");
                    this.$router.push("/home");
                    window.localStorage.setItem("token", "14777780746")
                }


            }

        },

        getcode() {
            let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
            this.count = 10

            if (!reg.test(this.phoneNum)) {
                this.$toast("请输入正确的手机号")
                return;
            } else {
                let time = setInterval(() => {
                    this.count--;
                    this.times = "display: inline;"
                    this.nodian = true
                    if (this.count == 0) {
                        clearInterval(time)
                        this.times = "display: none;"
                        this.nodian = false
                    }
                }, 1000);


            }

        }

    }
}
</script>

<style lang="scss">
@import "../assets/css/base.css";

.Top {
    height: 44px;
    line-height: 44px;
    border-bottom: 1px solid #f5f5f6;
    text-align: center;
    font-size: 16px;
    color: #060005;

}

.Top-tabs {
    height: 44px;
    display: flex;
    border-bottom: 1px solid #dfdfe3;

    .left {
        width: 50%;
        height: 43px;
        line-height: 43px;
        text-align: center;
        font-size: 14px;
        color: #948e9b;

        &.con {
            border-bottom: 1px solid #f5ba93;
            color: #ff7c22;
        }
    }

}

.inputs {
    .user {
        width: 345px;
        height: 44px;
        line-height: 44px;
        background-color: #f0f0f0;
        margin: 0 auto;
        box-shadow: 1px 1px 10px #f5f5f6;
        margin-top: 13px;
        color: #0e161b;
        font-size: 15px;

        span {
            display: inline-block;
            width: 80px;
            height: 44px;
            line-height: 44px;
            text-align: center;
        }

        input {
            width: 75%;
            border: none;
        }

    }

    .btn {
        width: 345px;
        height: 46px;
        line-height: 46px;
        margin: 35px auto 0 auto;
        text-align: center;
        background-color: #ff6600;
        color: #fff;
        font-size: 16px;
        box-shadow: 0 0 10px #fbe6d7;

    }

    p {
        width: 345px;
        margin: 18px auto 0 auto;

        a {
            color: #2ca0f0;
            font-size: 15px;
            float: right;
        }
    }

    .form-group {
        font-size: 12px;
        color: #999999;
    }

    .getnum {
        width: 100px;
        background-color: #ff6600;
        border: none;
        color: #fff;
        font-size: 15px;
        float: right;

        .times {
            display: inline;
        }
    }
}

.box {
    width: 345px;
    margin: 76px auto 0 auto;
    font-size: 12px;
    color: #000000;
}

.van-divider {
    margin: 112px 0 0 0;
}

.dd {
    width: 100%;
    overflow: hidden;
    padding-top: 26px;
    text-align: center;

    a {
        width: 22%;
        color: #333;
        text-align: center;
        font-size: 14px;
        display: inline-block;

        img {
            width: 40px;
            height: 40px;
            display: block;
            margin: 0 auto;
        }
    }
}
</style>